<template>
  <div class="w-full h-10 text-lg m-1 border-l-4 border-l-yellow-400 flex justify-around items-center text-white">
    <div @click="status = 0" :class="status === 0 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
      系统信息
    </div>
    <div @click="status = 1" :class="status === 1 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''">
      新手教程
    </div>
  </div>

  <van-list :finished="finished" finished-text="没有更多了" @load="loadData" v-model:loading="loading">
    <div class="bg-white rounded m-2 p-4" v-for="item in list" :key="item.id">
      <div class="flex justify-between items-center border-b-2 pb-2">
        <div>{{ item.title }}
        </div>
        <div class="text-gray-300 text-sm">{{ dayjs(item.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}</div>
      </div>
      <div v-html="item.content" class="mt-2 text-gray-500">

      </div>
    </div>
  </van-list>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { GetMessageIndexApi } from '@/apis/user';
import dayjs from 'dayjs';
const status = ref(0)
const finished = ref(false)
const loading = ref(false)
const list = ref([])

const page = ref(1)

function loadData() {
  loading.value = true
  if (status.value == 1) {
    GetMessageIndexApi({ page: page.value, event: 2 }).then(res => {
      if (res.list.length < 1) {
        finished.value = true
      } else {
        page.value++
        list.value.push(...res.list)
      }
    })
      .finally(() => {
        loading.value = false
      })
  } else {
    GetMessageIndexApi({ page: page.value }).then(res => {
      if (res.list.length < 1) {
        finished.value = true
      } else {
        page.value++
        list.value.push(...res.list)
      }
    })
      .finally(() => {
        loading.value = false
      })
  }

}

watch(status, () => {
  list.value = [];
  page.value = 1;
  finished.value = false
  loadData()
})
</script>
